# Categories

Categories allow you to group components in the left side bar.

## Creating categories

Use the [`categories` API](/docs/api-reference/configuration/config#categories) to define the component categories.

```tsx {2-6} copy showLineNumbers
const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
    },
  },
  // ...
};
```

Components can appear in separate categories:

```tsx /HeadingBlock/ copy showLineNumbers
const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
    },
    foundational: {
      components: ["HeadingBlock"],
    },
  },
  // ...
};
```

You can also change the title, collapse and hide categories:

```tsx {5,6,10} copy showLineNumbers
const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
      title: "Text",
      defaultExpanded: false, // Collapse this category by default
    },
    foundational: {
      components: ["HeadingBlock"],
      visible: false, // Mark this category as hidden
    },
  },
  // ...
};
```

## The "other" category

Any uncategorized components will be grouped in the `other` category. This will be visible by default. It respects the same API as other categories.

```tsx {6-8} copy showLineNumbers
const config = {
  categories: {
    typography: {
      components: ["HeadingBlock", "ParagraphBlock"],
    },
    other: {
      title: "Other components",
    },
  },
  // ...
};
```

## TypeScript

You can pass in available category names to the `Config` type if using TypeScript

```tsx copy {3}
import type { Config } from "@measured/puck";

const config: Config<{}, {}, "typography" | "interactive"> = {
  categories: {
    typography: {},
    interactive: {},
  },
  // ...
};
```

## Further reading

- [`categories` API reference](/docs/api-reference/configuration/config#categories)
- [`renderComponentList` API reference](/docs/api-reference/components/puck#rendercomponentlistparams)
